<template>
  <div class="login-container">
    <div class="login-header">
      <h1>BTDApp</h1>
      <p>区块链数字资产管理平台</p>
    </div>
    
    <div class="login-form">
      <t-form ref="form" :data="formData" :rules="rules" @submit="onSubmit">
        <t-form-item name="username">
          <t-input
            v-model="formData.username"
            placeholder="请输入用户名"
            clearable
          >
            <template #prefix-icon>
              <t-icon name="user" />
            </template>
          </t-input>
        </t-form-item>
        
        <t-form-item name="password">
          <t-input
            v-model="formData.password"
            type="password"
            placeholder="请输入密码"
            clearable
          >
            <template #prefix-icon>
              <t-icon name="lock-on" />
            </template>
          </t-input>
        </t-form-item>
        
        <div class="form-options">
          <t-checkbox v-model="rememberMe">记住我</t-checkbox>
          <t-link theme="primary" hover="color">忘记密码？</t-link>
        </div>
        
        <t-button 
          block 
          theme="primary" 
          type="submit" 
          :loading="loading"
        >
          登录
        </t-button>
        
        <div class="register-link">
          还没有账号？<t-link theme="primary" hover="color" @click="goToRegister">立即注册</t-link>
        </div>
      </t-form>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { MessagePlugin } from 'tdesign-vue-next'
import { login } from '@/api/user'
import { setToken, setUserInfo } from '@/utils/auth'

const router = useRouter()
const route = useRoute()

// 表单数据
const formData = reactive({
  username: '',
  password: ''
})

// 表单验证规则
const rules = {
  username: [
    { required: true, message: '请输入用户名', type: 'error' },
  ],
  password: [
    { required: true, message: '请输入密码', type: 'error' },
    { min: 6, message: '密码长度至少为6位', type: 'error' }
  ]
}

// 记住我
const rememberMe = ref(false)

// 加载状态
const loading = ref(false)

// 表单引用
const form = ref(null)

// 提交表单
const onSubmit = ({ validateResult }) => {
  if (validateResult === true) {
    loading.value = true
    
    login(formData)
      .then(res => {
        // 保存登录信息
        setToken(res.token)
        setUserInfo(res.userInfo)
        
        // 显示成功消息
        MessagePlugin.success('登录成功')
        
        // 跳转到首页或重定向页面
        const redirectPath = route.query.redirect || '/'
        router.push(redirectPath)
      })
      .catch(() => {
        // 错误处理已在请求拦截器中完成
      })
      .finally(() => {
        loading.value = false
      })
  }
}

// 跳转到注册页面
const goToRegister = () => {
  router.push('/register')
}
</script>

<style lang="scss" scoped>
.login-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 40px 20px;
  background-color: #f5f7fa;
  
  .login-header {
    text-align: center;
    margin-bottom: 40px;
    
    h1 {
      font-size: 28px;
      color: #0052d9;
      margin-bottom: 10px;
    }
    
    p {
      font-size: 16px;
      color: #666;
    }
  }
  
  .login-form {
    background-color: #fff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    
    .form-options {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }
    
    .register-link {
      margin-top: 20px;
      text-align: center;
      color: #666;
    }
  }
}
</style>